<template>
    <div>
      <el-carousel height="350px" class="lunbotu">
        <el-carousel-item v-for="(item,index) in banner" :key="index">
          <img :src="item.imageUrl" class="imageHot">
        </el-carousel-item>
      </el-carousel>
      <h1>推荐歌单</h1>
      <div class="item" v-for="item in musicList" :key="item.id">
        <img :src="item.picUrl" width="200" height="200">
        <br>
        <span class="checkspan">{{item.name}}</span>
      </div>
      <h1>最新音乐</h1>
      <div class="item" v-for="(item,index) in newSongs" :key="item.id+index">
        <img :src="item.picUrl" width="200" height="200">
        <span class="checkspan">{{item.name}}</span>
        <span class="checkspan" style="color: #0086b3">{{ item.song.artists[0].name }}</span>
        <el-button type="primary" @click="playMusic(item.id)">播放</el-button>
      </div>
      <h1 class="why">最新MV</h1>
      <div class="item" v-for="(item,index) in newMv" :key="item.id+index+2">
        <img :src="item.picUrl" width="350" height="200" class="itemimage">
        <span class="checkspan">{{item.name}}</span>
        <span class="checkspan" style="color: #0086b3">{{item.artistName}}</span>
        <el-button type="primary" @click="playMv(item.id)">播放</el-button>
      </div>
      <div class="audio_con">
        <audio ref='audio' :src="musicUrl" controls="controls" class="myaudio"></audio>
      </div>
      <div>
        <video ref='video' :src="mvUrl" controls="controls" class="vodiotext"></video>
      </div>
    </div>
</template>

<script>
export default {
  name: 'FirstView',
  data () {
    return {
      banner: [],
      musicList: [],
      newSongs: [],
      newMv: [],
      musicUrl: '',
      mvUrl: ''
    }
  },
  created () {
    this.getNewMusic()
    this.reCommendMusicList()
    this.getMusic()
    this.getMv()
  },
  methods: {
    // 每日热搜歌曲
    async getNewMusic () {
      const { data: res } = await this.$http.get('/banner')
      console.log(res)
      this.banner = res.banners
    },
    // 推荐歌单
    async reCommendMusicList () {
      const { data: res } = await this.$http.get('/personalized?limit=' + 10)
      console.log(res)
      this.musicList = res.result
    },
    // 最新音乐
    async getMusic () {
      const { data: res } = await this.$http.get('personalized/newsong')
      console.log(res)
      this.newSongs = res.result
    },
    // 最新MV
    async getMv () {
      const { data: res } = await this.$http.get('/personalized/mv')
      console.log(res)
      this.newMv = res.result
    },
    // 播放音乐,获取音乐地址
    playMusic (musicId) {
      // 获取歌曲url
      this.$http.get('/song/url?id=' + musicId).then(response => {
        // 保存歌曲url地址
        this.musicUrl = response.data.data[0].url
        console.log(this.musicUrl)
      })
    },
    // 获取MV地址
    playMv (vid) {
      if (vid) {
        // 获取mv信息
        this.$http.get('/mv/url?id=' + vid).then(response => {
          // 获取mv地址
          console.log(response)
          this.mvUrl = response.data.data.url
        })
      } else {
        this.$message.error('获取MV地址失败！')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.lunbotu{
  margin: 0 auto;
}
  .imageHot{
   position: fixed;
    right: 100px;
  }
h1{
  font-size: 35px;
  font-weight: bold;
}
  .item{
    float: left;
    padding: 25px;
  }
.checkspan{
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
  -webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
  -webkit-line-clamp: 1;
  font-size: 14px;
}
.why{
 margin-left: 50px;
}
.myaudio{
  width: 100%;
}
  .vodiotext{
    width: 100%;
  }
  .itemimage{
  }
</style>
